<template>
    <div class="tabs-content">
          <!--*************************************************************历史申请***************************************************-->
                  <!-- 内容区域 -->
                  <el-table
                    ref="PastDocDataList"
                    border
                    :data="PastDocDataList"
                    height="73.5%"
                    style="width: 97.5%"
                    :header-cell-style="{height: '7vh'}"
                    :cell-style="cellStyle"
                  >
                    <el-table-column
                      type="index"
                      :index="getIndex"
                      width="55"
                      label="序号"
                      header-align="center"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="processInstanceId"
                      label="流程ID"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                      </el-table-column>
                    <el-table-column
                      prop="instanceType"
                      label="公文类型"
                      header-align="center"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="description"
                      label="公文描述"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="quantity"
                      label="天数"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="instanceStartTime"
                      label="申请时间"
                      width="190"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['instanceStartTime']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="startDate"
                      label="开始时间"
                       width="190"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['startDate']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="endDate"
                      label="结束时间"
                       width="190"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{renderTime(scope.row['endDate']) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="isEnded"
                      label="申请状态"
                      header-align="center"
                      align="center"
                      v-if="flag === 1">
                    </el-table-column>
                    <!-- <el-table-column
                      prop="document"
                      width="180"
                      label="是否是公文"
                      header-align="center"
                      align="center">
                    </el-table-column> -->
                    <el-table-column
                      prop="privacy"
                      label="私密性"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{scope.row['privacy'] == 1 ? '公开' : '私密'}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="hurry"
                      label="急缓"
                      header-align="center"
                      align="center">
                      <template slot-scope="scope" >
                        <span>{{scope.row['privacy'] == 1 ? '一般' : '紧急'}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="path"
                      label="路径"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      prop="answer"
                      label="公文状态"
                      header-align="center"
                      align="center"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="answerComment"
                      label="审批描述"
                      header-align="center"
                      align="center"
                      v-if="flag===1">
                    </el-table-column>
                    <el-table-column
                      width="100"
                      header-align="center"
                      align="center"
                      label="操作"
                      >
                      <template slot-scope="scope">
                        <!-- <el-link type="primary" @click="handleLook(scope.row)">查看</el-link> -->
                        <el-button size="small" type="primary" style="width:20;height: 30px;" @click="handleLook(scope.row)">查看</el-button>
                        <!-- <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button> -->
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 分页器 -->
                  <div class="block">
                    <el-pagination
                      align="right"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </div>
                  <!-- 弹窗，新增或修改 -->
                  <!-- <el-dialog
                        :title="textMap[dialogStatus]"
                        :close-on-click-modal=true
                        :visible.sync="dialogFormVisible"
                        >
                        <el-form
                        :rules="rules1"
                        class="Addform"
                        :model="dataForm"
                        ref="dataForm"
                        @keyup.enter.native="dataFormSubmit()"
                        label-width="110px"
                        label-position="left"
                        style="width: 400px; margin-left: 80px">
                          <div class="right1">
                            <el-row :gutter="15">
                                <el-form-item label="申请类型" style="width: 370px;" prop="instanceType" >
                                  <el-select v-model="dataForm.mtrState" style="width: 260px;" placeholder="请选择申请类型">
                                    <el-option
                                      v-for="item in array"
                                      :key="item.deploymentId"
                                      :label="item.deploymentType"
                                      :value="item.deploymentId"
                                    >
                                    </el-option>
                                  </el-select>
                                </el-form-item>
                                <el-form-item label="申请人" style="width: 370px;" prop="starter" >
                                  <el-input v-model="dataForm.username" ></el-input>
                                </el-form-item>
                                <el-form-item label="数量" style="width: 370px;" prop="quantity">
                                  <el-input v-model="dataForm.quantity" ></el-input>
                                </el-form-item>
                                <el-form-item label="申请理由" style="width: 370px;" prop="description">
                                  <el-input v-model="dataForm.description" ></el-input>
                                </el-form-item>
                                <el-form-item label="开始时间" style="width: 370px;" prop="beginDate">
                                  <el-form-item style="width: 260px;" prop="beginDate">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.beginDate" style="width: 100%;"></el-date-picker>
                                  </el-form-item>
                                </el-form-item>
                                <el-form-item label="结束时间" style="width: 370px;" prop="endDate">
                                  <el-form-item style="width: 260px;" prop="endDate">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.endDate" style="width: 100%;"></el-date-picker>
                                  </el-form-item>
                                </el-form-item>
                                <el-form-item label="是否是公文" style="width: 370px;" prop="document">
                                  <el-input v-model="dataForm.document" ></el-input>
                                </el-form-item>
                                <el-form-item label="私密性" style="width: 370px;" prop="privacy">
                                  <el-input v-model="dataForm.privacy" ></el-input>
                                </el-form-item>
                                <el-form-item label="急缓" style="width: 370px;" prop="hurry">
                                  <el-input v-model="dataForm.hurry" ></el-input>
                                </el-form-item>
                                <el-form-item label="审批意见" style="width: 370px;" prop="answer">
                                  <el-input v-model="dataForm.answer" ></el-input>
                                </el-form-item>
                                <el-form-item label="审批描述" style="width: 370px;" prop="answerComment">
                                  <el-input v-model="dataForm.answerComment" ></el-input>
                                </el-form-item>
                            </el-row>
                          </div>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="dialogStatus === 'create' ? createData() : lookData()">确定</el-button>
                          <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                        </span>
                  </el-dialog> -->
    </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'PastDoc',
  data() {
    return {
      // *******翻页*********************
      PastDocDataList: [], // 流程定义文件数据
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页选定的显示条数
      total: 0,
      // ********************************
      options: [{
        value: '流程ID',
        label: '流程ID'
      }, {
        value: '申请类型',
        label: '申请类型'
      }, {
        value: '申请状态',
        label: '申请状态'
      }],
      value: '',
      dataForm2: {}, // 想要查询的设备数据
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogFormVisible4: false,
      dialogFormVisible3: false,
      dataForm: {},
      dataFormExamine: {
        answer: '',
        answerComment: ''
      },
      dataFormUpload: {
        did: '',
        starter: '',
        beginDate: '',
        endDate: '',
        quantity: '',
        description: '',
        document: 1,
        privacy: '',
        hurry: ''
        // file: ''
      }, // “我的申请”界面新增弹窗绑定的表单
      postId: 0,
      flag: 0,
      array: [],
      user: {},
      authentication: '',
      fileList: [], // 文件列表
      fileflag: 0,
      tableDataArray7: [],
      tableDataArray8: [],
      twoTime: []
    }
  },
  // 生命周期
  mounted(activeName) {
    this.getDataListHistory()
    this.authentication = sessionStorage.getItem('tokenStr')
    // this.getData()
  },
  created() {
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
  },
  computed: {
    header() {
      return {
        authentication: this.authentication
      }
    }
  },
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    // 时间格式转换
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    // 查看
    handleLook(data) {
      console.log('************')
      console.log(data.path)
      const link = document.createElement('a')
      // link.style.display = 'none'
      link.href = data.path
      link.click()
    },
    // getData() {
    //   const loading = this.$loading({
    //     lock: true, // lock的修改符--默认是false
    //     text: 'Loading', // 显示在加载图标下方的加载文案
    //     spinner: 'el-icon-loading', // 自定义加载图标类名
    //     background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
    //     target: document.querySelector('#table')// loadin覆盖的dom元素节点
    //   })
    //   // 成功回调函数停止加载
    //   loading.close()
    // },
    GetNumberOfDays(date1, date2) { // 获得天数
      // date1：开始日期，date2结束日期
      var a1 = Date.parse(new Date(date1))
      var a2 = Date.parse(new Date(date2))
      var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24))// 核心：时间戳相减，然后除以天数
      return day
    },
    fixUserName() {
      const info = JSON.parse(sessionStorage.getItem('user'))
      console.log('获取userName')
      console.log(info)
      this.dataFormUpload.starter = info.name
    },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // ****************翻页*************
    // 改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    // 序号
    getIndex(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    // *********************************
    // “历史申请“数据列表
    getDataListHistory(data) {
      // this.flag = 1
      var applyfind = 1
      this.getRequest('/process/hiInstance/' + this.user.name + '/' + applyfind + '/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          console.log('-------------hhhh------------------------------')
          console.log(resp)
          var len = resp.data.length
          this.total = resp.data[len - 1].total
          this.tableDataArray3 = resp.data
          this.tableDataArray3.pop(resp.data[len - 1])
          this.PastDocDataList = this.tableDataArray3
          console.log(this.PastDocDataList)
        } else {
          console.log('查看历史申请失败')
        }
      })
    },
    returnValue() {
      return {
        token: sessionStorage.getItem('tokenStr')
      }
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/top-form.css';
@import '../../assets/css/table.css';
.tabs-content {
  width: 100%;
  height: 78vh !important;
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 94% !important;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体' !important;
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体' !important;
}
/** 分页器 end */
</style>
